<template>
	<view class="claim" >
		<view class="top">
			<view class="title">订单识别码：</view>
			<textarea value="" placeholder="请输入订单识别码,如果多个请以英文逗号分隔" class="textarea" v-model="param" />
			<view class="button" @click="find()">搜 索</view>
		</view>
		<view class="separate">
			<view class="wire"></view>
			<text>已认领订单</text>
		</view>
		<view class="list" v-for="(item, index) in dataList" :key="index">
			<view class="li">
				<view class="shop">
					<image :src="item.image" class="imgthumb" :lazy-load="true" mode="aspectFill" />

					<view class="msg" @click="go_details(item.orderId)">
						<view class="name black">订单号：{{ item.orderSn }}</view>
						<view class="time gray ">下单时间：{{ item.createdTime }}</view>
						<view v-for="(item1,index1) in item.sku" :key="index1">
							<view class="sizr gray " v-if="index1==0">颜色：{{item1.split(":")[1]}}</view>
							<view class="sizr gray " v-if="index1==1">尺码：{{item1.split(":")[1]}}</view>
						</view>
					</view>
				</view>
				<view class="genre">
					共1件
					<view class="price">
						合计：
						<text>¥{{ item.orderPrice }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="dataList.length==0" class="notavailable">
			<image src="../../../static/img/notavailable.png" mode="widthFix"></image>
			<view class="nottext">暂时没有数据</view>
		</view>
	</view>
</template>

<script>
import order from '../../../servers/agent/order/order.js';
import { uniNavBar, uniIcons } from '@dcloudio/uni-ui';
export default {
	data() {
		return {
			dataList: [],
			param: ''
		};
	},
	onShow() {
		this.initData();
	},
	methods: {
		initData() {
			/* 默认初始化提交订单页面 */
			console.log(2342423423);
			uni.showLoading({
				title: '数据加载中'
			});
			order
				.cliamList()
				.then(res => {
					if(res.code==200){
						this.dataList = res.data.record.records.map(v => {
							v.image = this.imgCDNUrl + v.productImg;
							var sku = [];
							if (v.productSkuDesp) {
								sku = v.productSkuDesp.split(',');
							}
							v.sku = sku;
							return v;
						});
						this.whole = res.data.whole;
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
					
					uni.hideLoading();
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
				
		},
		go_details(orderId) {
			uni.navigateTo({
				url: '/pages/agent/order/orderdetails?id=' + orderId
			});
		
		},
		find() {
			order
				.checkAgent()
				.then(res => {
					if(res.code==200){
						if(res.data==0){
							uni.showToast({
								title:'订单认领已关闭，无法认领',
								icon:'none'
							})
						}else{
							if(this.param==''){
								uni.showToast({
									title:'您还没有输入订单识别码哦~',
									icon:'none'
								})
								return;
							}
							uni.navigateTo({
										url:'/pages/agent/order/claimlist?arr='+this.param
							});
						}
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
					
					uni.hideLoading();
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
			
		
			
			
			
			// uni.setStorage({
			// 	key: 'agentclaimlist',
			// 	data: this.param,
			// 	success: function() {
			// 		uni.navigateTo({
			// 			url: '/pages/agent/order/claimlist'
			// 		});
			// 	}
			// });
		}
	}
};
</script>

<style lang="less" scoped>
.top {
	background: #ffffff;
	padding: 20rpx;
	.title {
		padding: 20rpx 0;
		font-size: 36rpx;
	}
	.textarea {
		border-radius: 10rpx;
		box-shadow: 5rpx 0px 20rpx #c5c5c5;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		width: 100%;
	}
	.button {
		height: 90rpx;
		line-height: 90rpx;
		margin: 30rpx 20rpx;
		text-align: center;
		color: #ffffff;
		border-radius: 50px;
		font-size: 32rpx;
		background: linear-gradient(90deg, #d2158a, #fc6395);
	}
}
.separate {
	position: relative;
	text-align: center;
	font-size: 30rpx;
	color: #999999;
	padding: 29rpx 0;
	.wire {
		position: absolute;
		width: 608rpx;
		border-bottom: 1px solid #999999;
		top: 50rpx;
		left: 77rpx;
		z-index: -1;
	}
	text {
		padding: 0 29rpx;
		background: #f3f3f3;
	}
}
.list {
	padding: 0 20rpx;
	background: #ffffff;
	.li {
		padding: 50rpx 0;
		border-bottom: 1px solid #e1e1e1;
		.shop {
			position: relative;
			display: flex;
			flex-direction: row;
			image {
				width: 230rpx;
				height: 230rpx;
				border-radius: 10rpx;
			}
			.msg {
				width: 431rpx;
				margin-left: 37rpx;
				line-height: 46rpx;
				.name {
					font-size: 28rpx;
					height: 100rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
				.type {
					font-size: 26rpx;
				}
				.gray {
					color: #999999;
					font-size: 26rpx;
					line-height: 42rpx;
				}
			}
		}
		.genre {
			padding-top: 54rpx;
			text-align: right;
			color: #999999;
			font-size: 26rpx;
			.price {
				display: inline-block;
				color: #333333;
				margin-left: 29rpx;
				text {
					font-size: 30rpx;
					color: #333333;
				}
			}
		}
	}
	.li:nth-last-child(1) {
		border-bottom: none;
	}
}
</style>
